<template>
  <div>
    <div class="turn-box" id="filbooks" v-if="index">
      <div id="indexs" ref="flipbook" class="turn-page">
        <img v-for="(item,index) in list"  :key="index" class="images" :src="item" alt="">
      </div>
    </div>
  </div>
</template>

<script>

import $ from 'jquery'
import turn from '@/utils/turn.js'
export default {
  data(){
    return{
      index:false,
      list:[
        require('@/assets/images/book/1.jpg'),
        require('@/assets/images/book/2.jpg'),
        require('@/assets/images/book/3.jpg'),
        require('@/assets/images/book/4.jpg'),
        require('@/assets/images/book/5.jpg'),
        require('@/assets/images/book/6.jpg'),
        require('@/assets/images/book/7.jpg'),
        require('@/assets/images/book/9.jpg'),
        require('@/assets/images/book/10.jpg'),
        require('@/assets/images/book/11.jpg'),
        require('@/assets/images/book/12.jpg'),
        require('@/assets/images/book/13.jpg'),
        require('@/assets/images/book/14.jpg'),
      ],
      pages: 2
    }
  },
  methods:{
    onTurn() {
      this.$nextTick(() => {
        $(`#indexs`).turn({
          acceleration: true, //启用硬件加速,移动端有效
          display: 'double', //显示：single=单页，double=双页，默认双页
          duration: 800, // 翻页撒开鼠标，页面的延迟
          page: this.pages, // 默认显示第几页
          gradients: true, // 折叠处的光泽渐变，主要体现翻页的立体感、真实感
          autoCenter: true, //
          turnCorners: 'bl,br',
          height: 750, //页面高度
          width: 900, //翻书范围宽度，总宽度
        })

      })
    },
    getTurn(){
      this.$nextTick(()=>{
        const myDiv = document.getElementById('indexs');
        myDiv.addEventListener('mouseover', () => {
          // 监听滚轮事件进行翻页
          document.addEventListener('mousewheel', this.handleWheel, false)
          document.addEventListener('DOMMouseScroll', this.handleWheel, false)
        });

      })
    },
    handleWheel(event) {
      const delta = event.wheelDelta || -event.detail
      if (delta < 0) {
        $(`#indexs`).turn('previous');
      } else {
        $(`#indexs`).turn('next');
      }
    },

    removeItem(){
      document.removeEventListener('mousewheel', this.handleWheel)
      document.removeEventListener('DOMMouseScroll', this.handleWheel)
    }
  },

  mounted() {
    this.index=true
    this.onTurn();
    this.getTurn()
  },


  beforeDestroy() {
    // 清理监听器
    this.removeItem()
  },
}
</script>

<style scoped lang="scss">
.turn-box{
  width: 100%;
  display: flex;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  min-height: 600px;
  .turn-page{
    width: 800px;
    height: 780px;
    .images{
      height: 780px;
      object-fit: contain;
    }
  }
}
::v-deep(.el-dialog__close){
  color: #fff !important;
}

::v-deep(.el-dialog){
  background: #fff;
  box-shadow: none;
  border-radius: 10px;
  padding: 0;
  height: 0;
}

</style>